<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <div class="container parent">
    <header>.header</header>
    <aside>.sidebar</aside>
    <main class="subgrid">
      <header>.sub-header</header>
      <aside>.sub-sidebar</aside>
      <main>.sub-main</main>
      <nav>.sub-nav</nav>
      <footer>.sub-footer</footer>
    </main>
    <nav>.nav</nav>
    <footer>.footer</footer>
  </div>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  padding: 1rem;

  .container {
    font-family: "Bungee Shade", cursive;
    font-size: 1.5rem;
    color: #000;
    min-height: calc(100vh - 2rem);
    padding: 10px;
    outline: 3px solid #111;
    background: #333;

    &.parent {
      display: grid;
      grid-template-columns:
          [header-start sidebar-start footer-start] 200px
          [sidebar-end main-start] auto 1fr auto
          [main-end nav-start] 220px
          [header-end nav-end footer-end];
      grid-template-rows:
          [header-start] auto
          [header-end sidebar-start main-start nav-start] auto 1fr auto
          [sidebar-end main-end nav-end footer-start] auto
          [footer-end];
      gap: 1rem;
    }
    header {
      grid-area: header;
      background-color: #dac2f1;
    }

    aside {
      grid-area: sidebar;
      background-color: #ccf1c2;
    }

    nav {
      grid-area: nav;
      background-color: #90aeef;
    }

    main {
      grid-column: main-start / main-end;
      grid-row: main-start / main-end;
      background-color: #f44336;

      &.subgrid {
        display: inherit;
        grid-template-columns: subgrid [sub-header-start sub-sidebar-start sub-footer-start] [sub-sidebar-end sub-main-start] [sub-main-end sub-nav-start] [sub-header-end sub-nav-end sub-footer-end];
        grid-template-rows:
    subgrid [sub-header-start] [sub-sidebar-start sub-header-end
    sub-main-start sub-nav-start] [sub-sidebar-end sub-main-end sub-nav-end
    sub-footer-start] [sub-footer-end];
      }

      header {
        grid-area: 1 / 1 / 2 / 4;
        background-color: #2196f3;
      }

      aside {
        grid-area: 2 / 1 / 3 / 2;
        background-color: #f196f3;
      }

      main {
        grid-area: 2 / 2 / 3 / 3;
        background-color: yellow;
      }

      nav {
        grid-area: 2 / 3 / 3 / 4;
        background-color: orange;
      }
      footer {
        grid-area: 3 / 1 / 4 / 4;
        background-color: #09f;
      }
    }

    footer {
      grid-area: footer;
      background-color: #c2e9f1;
    }
  }
}
</style>
